<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
// 获取指定元素距离窗口左上角偏移坐标
// 参数：e表示获取位置的元素
// 返回值：返回对象直接量，其中属性x表示x轴偏移距离，属性y表示y轴偏移距离
function getPoint(e){
    var x = y = 0; 			// 初始化临时变量
    while(e.offsetParent){
 	// 如果存在offsetParent指代的元素，则获取它的偏移坐标
        x += e.offsetLeft; 	// 累计总的x轴偏移距离
        y += e.offsetTop; 	// 累计总的y轴偏移距离
        e = e.offsetParent;
 	// 把当前元素的offsetParent属性值传递给循环条件表达式
    }
    return {
	// 遍历到body元素后，将停止循环，把叠加的值赋值给对象直接量，并返回该对象
        "x" : x, 
        "y" : y
    };
}

// 获取指定元素距离父元素左上角的偏移坐标
// 参数：e表示获取位置的元素
// 返回值：返回对象直接量，其中属性x表示x轴偏移距离，属性y表示y轴偏移距离
function getP(e){
    if(e.parentNode == e.offsetParent){ 
	// 判断offsetParent属性是否指向父级元素
        var x = e.offsetLeft; 		// 如果是，则直接读取offsetLeft属性值
        var y = e.offsetTop ; 		// 读取offsetTop属性值
    }
    else{
	// 否则调用getW()扩展函数获取当前元素和父元素的x轴坐标，并返回它们的差值
        var o = getPoint(e);
        var p = getPoint(e.parentNode);
        var x = o.x - p.x;
        var y = o.y - p.y;
    }
    return {			// 返回对象直接量，对象包含当前元素距离父元素的坐标
        "x" : x, 
        "y" : y
    }; 
}

</script>
<style type="text/css">
div {
    width:200px; height:100px; border:solid 1px red; padding:50px;
}
#wrap {
    position:relative;
    border-width:20px; 
}
</style>
</head>
<body>



<div id="wrap">
    <div id="sub">
        <div id="box"></div>
    </div>
</div>

<script>

var box = document.getElementById("box");
var o = getP(box); 		// 调用扩展函数获取元素相对父元素的偏移坐标
alert(o.x); 			// 读取x轴坐标偏移值
alert(o.y); 			// 读取y轴坐标偏移值


</script>


</body>
</html> 
